<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-if="awesome">Vue is so awesome 真正的条件渲染</p>
        <p v-else>wuhan2103 -daydayup</p>

        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>wuhan2103-天道酬勤</p>
        </template>
        <div v-show="!ok">
            <h3>v-show 只是样式的显示和隐藏 display 切换显示隐藏 </h3>
        </div>
        <div>
            <div v-if="score>90">
                A
            </div>
            <div v-else-if="score>80">
                B
            </div>
            <div v-else-if="score>70">
                C
            </div>
            <div v-else-if="score>60">
                D
            </div>
            <div v-else>
                E
            </div>
        </div>
        <div v-if="userinfo">
            <p>username==={{userinfo.username}}</p>
            <p>nickname==={{userinfo.nickname}}</p>
        </div>
        <p>nickname==={{userinfo&&userinfo.nickname}}</p>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            msg: "v-if && v-show",
            awesome: false,
            ok: true,
            score: 90,
            userinfo: null
        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.msg;
            setTimeout(() => {
                this.userinfo = {
                    username: "zuozuomu",
                    nickname: "Big Zuo"
                }
            }, 1000)
        }
    }).$mount("#app")

</script>
<!-- 
        v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 
        表达式的值 为 false 则什么都不做 不会渲染DOM 
        template 包裹的空元素    没有任何效果

        v-else 必须 与它最近的 v-if 匹配 

        v-show   指令通过 display 来控制显示和隐藏 
        带有 v-show的元素 会始终渲染到DOM  只是简单的样式切换 

        v-if vs v-show 
        v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 
        v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换    
        
        使用场景 (使用频率)
        v-if 有更高的切换开销  在切换条件很少改变的情况下  推荐使用 v-if   v-if 现实初始化内部的数据变量 
        v-show 有更高的初始渲染开销  需要频繁的切换的情况下 推荐使用 v-show 

        v-if 与 v-for 一起使用 (不推荐)
        如果一定要用  
        v-for 比 v-if 有更高的优先级 
        v-if 写在 v-for(循环) 的外面   提高 v-if 的优先级 
        
        异步数据 
        错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 
     -->

</html>